<script setup lang="ts">
import Table from "@/components/Table.vue";


import { reactive, ref, watch, computed } from 'vue'

const ranklist = reactive(
    [
        {
            id: 1,
            name: '汪凯',
            progress: '100%',
            score: 98,
            rank: 1
        },
        {
            id: 2,
            name: '杜振宇',
            progress: '97%',
            score: 95,
            rank: 2
        }, {
            id: 3,
            name: '何灵灵',
            progress: '94%',
            score: 95,
            rank: 3
        }, {
            id: 4,
            name: '杨科',
            progress: '85%',
            score: 85,
            rank: 4
        }, {
            id: 5,
            name: '麦著胜',
            progress: '75%',
            score: 86,
            rank: 5
        },
        {
            id: 6,
            name: '方卓彬',
            progress: '65%',
            score: 75,
            rank: 6
        },
        {
            id: 7,
            name: '李彤博',
            progress: '55%',
            score: 65,
            rank: 7
        }, {
            id: 8,
            name: '孙子峻',
            progress: '45%',
            score: 45,
            rank: 8
        }
    ]
)

</script>
    
<template>
    <Table :ranklist="ranklist" bgColor="#e3edf7"></Table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="100" />
    </div>
</template>
    
<style scoped lang="scss">
.pagination {
    position: absolute;
    right: 9vw;
    bottom: 12px;
    // margin: auto;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active)  {
    background-color: $theme-color;
}
</style>